<template>
    <div class="righttopwrap">
        <div class="titletop">北京深信服上网行为管理WEB统计</div>
        <div class="datawall">
            <div class="lefttopper">
                <div class="leftthree" v-for="(datanum,index) in datanums" :key="index">
                    <p class="num">{{datanum.num}}</p>
                    <p class="name">{{datanum.name}}</p>
                </div>
                </div>
            <div  ref="lines" class="righttopper"></div>
        </div>
    </div>
</template>

<script>
import {getWEBCount} from "../assets/api/api"
export default {
    data() {
        return {
            datanums:[
            //     {
            //     num:100,
            //     name:"接入用户数"
            // },{
            //     num:30,
            //     name:"PC"
            // },{
            //     num:70,
            //     name:"移动端"
            // }
            ],
            linesdataset:[],
            timer:null
            };
    },
    created(){
        this.fetchData()
        this.timer = setInterval(() => {
        this.fetchData()
        }, this.howtimeout)
    },
    destroyed() {
        clearInterval(this.timer)
    },
    mounted(){
    this.drawEcharts();
    },
    watch: {
        linesdataset() {
        this.drawEcharts();
        }
    },
    methods: {
        fetchData() {
            getWEBCount().then((res)=>{
                this.datanums=res.data.result[0].datanums;
                this.linesdataset=res.data.result[0].linesdataset;
            });
        },
        drawEcharts(){
            let lines =this.$echarts.init(this.$refs.lines)
            lines.setOption({
                dataset: {
                    // 提供一份数据。
                    // source: [
                    //     ['SendorGet', '19:32', '19:33', '19:34', '19:35'],
                    //     ['发送', 17, 16, 18, 16.5, 19.5, 17, 16],
                    //     ['接收', 12, 14, 12.3, 14.8, 10.4, 13, 10.5],
                    // ]
                    source:this.linesdataset,
                },
                legend: { 
                    itemGap: 26,
                    right: '8.5%',
                    top: '6%',
                    icon: 'roundRect',
                    itemWidth: 12,
                    itemHeight: 12,
                    textStyle: {
                        fontSize: 12,
                        color: "#a4d6ff",
                        padding: [0, 0, 0, 2]
                    }
                },
                xAxis: {
                    type: 'category',
                    boundaryGap: false,
                    // data: ['19:32', '19:33', '19:34', '19:35'],
                    axisLine: {
                        lineStyle: {
                            color: '#003b86'
                        }
                    },
                    axisTick: {
                        show: false
                    },
                    axisLabel: {
                        color: '#a4d6ff',
                        fontSize: 12
                    },
                },
                    yAxis: {
                        type: 'value',
                        splitNumber: 4,
                        axisLine: {
                            show: false
                        },
                        axisTick: {
                            show: false
                        },
                        axisLabel: {
                            color: '#a4d6ff'
                        },
                        splitLine: {
                            lineStyle: {
                                type: "dashed",
                                width: 2.5,
                                color:'#002261'
                            }
                        }
                    },
                    series: [{
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        seriesLayoutBy: 'row',
                        itemStyle: {
                            color: '#00ffff',
                            borderWidth: 2
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#0a56be' // 0% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(10,86,190,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    },{
                        type: 'line',
                        smooth: true,
                        showSymbol: false,
                        seriesLayoutBy: 'row',
                        itemStyle: {
                            color: '#b89cff',
                            borderWidth:2
                        },
                        areaStyle: {
                            color: {
                                type: 'linear',
                                x: 0,
                                y: 0,
                                x2: 0,
                                y2: 1,
                                colorStops: [{
                                    offset: 0, color: '#8d8be6' // 0% 处的颜色
                                }, {
                                    offset: 0.26, color: 'rgba(120, 117, 216, 0.25)' // 100% 处的颜色
                                }, {
                                    offset: 0.51, color: 'rgba(98, 95, 202, 0.51)' // 100% 处的颜色
                                }, {
                                    offset: 1, color: 'rgba(10,86,190,0)' // 100% 处的颜色
                                }],
                                global: false // 缺省为 false
                            }
                        }
                    }]
            })
        }
    }
}
</script>

<style lang="less" scoped>
@import url("../base.css");
p {
    margin: 0;
    padding: 0;
}
.righttopwrap{
    text-align: center;
    width: 708px;
    height: 452px;
    color: 'white';
    .titletop {
        font-size: 24px;
        color: #a4d6ff;
        margin: 25px auto;
        padding-top: 15px;
    }
    .datawall {
        display: grid;
        width: 617px;
        margin: 0 auto;
        grid-template-columns: minmax(144px, 30%) 1fr;
        .lefttopper{
            .leftthree {
                background-image: url('../assets/icons/user.png');
                height: 81.5px;
                width: 144px;
                .num {
                    padding-top: 17px;
                    font-size: 20px;
                    color: #f4d052;
                }
                .name {
                    margin-top: 3px;
                    font-size: 14px;
                    color: #a4d6ff;
                }
            }
        }
    }
    .righttopper {
        width: 470px;
        height: 280px;
        margin-left: 20px;
    }
}
</style>